<template>
  <div class="LockInformation">
    <div class="blueTitleStyle title">
      告警信息&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <el-radio-group id="elRadio" v-model="radio" @change="changeHald">
        <el-radio
          v-for="(item, index) in gjdjOptions"
          :key="index"
          :label="item.name"
          :value="item.code"
        ></el-radio>
        <!-- <el-radio label="0">全部</el-radio>
        <el-radio label="1">事故</el-radio>
        <el-radio label="2">异常</el-radio>
        <el-radio label="3">越限</el-radio>
        <el-radio label="4">变位</el-radio>
        <el-radio label="5">告知</el-radio>-->
      </el-radio-group>
    </div>
    <div class="more" @click="goPage('')">更多</div>
    <div id="scroller" class="LockInformation-con">
      <!-- <div class="LockInformation-con-title">
        <div class="itemspecial"></div>
        <div class="item">告警时间</div>
        <div class="item">所属变电站</div> 
        <div class="item">告警内容</div>
      </div>-->
      <div class="marquee_box">
        <marquee
          @mouseenter="marqueeEnter"
          @mouseleave="marqueeLeave"
          scrollamount="2"
          direction="up"
          style="width:100%;height:100%;"
        >
          <ul class="marquee_list">
            <li
              :class="index%2==0?'lione':'litwo'"
              v-for="(item, index) in mainLoadList"
              :key="index"
              @click="goPage(item)"
            >
              <!-- <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button> -->
              <div class="tubiao centerbox">
                <i :class="item.imgsrc" class="iconfont"></i>
                <!-- <img  :src="item.imgsrc" class="iconImage" /> -->
              </div>
              <!-- <img src="" alt=""> -->
              <!-- <span>{{ item.bdzmc }}</span> -->
              <span>{{ item.gjsj }}</span>
              <span>{{ item.ssbdz }}</span>
              <span>{{ item.gjnr }}</span>
            </li>
          </ul>
        </marquee>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import { GetSocketModule } from "@/store/modules/GetSocketData";
import { HomepageModule } from "@/store/modules/Homepage";
import time from "../../../../utils/time";
@Component
export default class LockInformationsecond extends Vue {
  radio: any = "全部";
  gjdjOptions = [
    {
      name: "全部",
      code: 0,
    },
    {
      name: "事故",
      code: 1,
    },
    {
      name: "异常",
      code: 2,
    },
    {
      name: "越限",
      code: 3,
    },
    {
      name: "变位",
      code: 4,
    },
    {
      name: "告知",
      code: 5,
    },
  ];
  private scrollTimer; // 滚动定时器
  // 跳转到二级主变负载页面
  private goPage(zhData: any) {
    console.log(111, zhData);
    let query = {};
    if (zhData) {
      query = {
        station: zhData.BDZID,
        clzt: 0,
        name: zhData.SBMC,
      };
    } else {
      let mapByStation = HomepageModule.mapByStation;
      query = {
        station: mapByStation.stationId,
      };
    }
    console.log(2);

    this.$router.push({
      path: "/operationmonitor/index",
      query: query,
    });
  }
  private mainLoadList = [];
  // 监听主编负载滚动列表
  // get newMainLoadList() {
  //   // 台账按点位划分
  //   let mapByStation = HomepageModule.mapByStation;
  //   let getterAllAuxiliaryByPointId =
  //     GetSocketModule.getterAllAuxiliaryByPointId;

  //   let mainLoadList = [];
  //   let list = [];
  //   let xtImgObj = {
  //     // "01": require("../../../../assets/img/AuxiliaryMonitor/icon/firefight.png"),
  //     // "02": require("../../../../assets/img/AuxiliaryMonitor/icon/security.png"),
  //     // "03": require("../../../../assets/img/AuxiliaryMonitor/icon/zxjc.png"),
  //     // "04": require("../../../../assets/img/AuxiliaryMonitor/icon/ecocrisis.png"),
  //     // "05": require("../../../../assets/img/AuxiliaryMonitor/icon/light.png"),
  //     // "06": require("../../../../assets/img/AuxiliaryMonitor/icon/drainage.png"),
  //     "01": "iconxiaofang",
  //     "02": "iconanfang",
  //     "03": "iconzaixianjiance",
  //     "04": "iconicon-wenshidu",
  //     "05": "iconfloodLighting-o",
  //     "06": "icongeipaishui",
  //   };
  //   let index = 0;
  //   for (let key in getterAllAuxiliaryByPointId) {
  //     if (mainLoadList.length < 200) {
  //       let point = getterAllAuxiliaryByPointId[key] || {};
  //       let imgsrc = xtImgObj[point.xtValue];
  //       if (point.isGj == "gj") {
  //         let gjsj = point.time;
  //         let message = point.message;
  //         // if (imgsrc) {
  //           gjsj = time(gjsj);
  //           let obj = {
  //             imgsrc,
  //             xt: point.xtName,
  //             gjsj,
  //             timenum:gjsj&&new Date(gjsj).getTime(),
  //             ssbdz: point.stationName,
  //             gjnr: message,
  //             xtValue: point.xtValue,
  //           };
  //           if (mapByStation.stationId) {
  //             if (mapByStation.stationId === point.stationId) {
  //               mainLoadList.push(obj);
  //               list.push(point);
  //             }
  //           } else {
  //             mainLoadList.push(obj);
  //             list.push(point);
  //           }
  //         // }
  //       }
  //     }
  //   }
  //   mainLoadList=mainLoadList.sort((a,b)=>(b.timenum-a.timenum))
  //   return mainLoadList;
  // }
  get currentMap() {
    let mapByStation = HomepageModule.mapByStation;
    return mapByStation;
  }
  @Watch("currentMap")
  setData(val) {
    console.log(val);
    
    this.queryIntegrageAlarmList();
  }
  created() {
    // this.changeHald("全部");
  }
  mounted() {
    this.loading = true;
    this.queryIntegrageAlarmList();

    this.myFunc();
  }
  myFunc() {
    setTimeout(() => {
      if(document.all) {
        document.getElementById('elRadio').onchange
      }
    }, 100);
  }
  loading = true;
  // 表格数据查询
  queryIntegrageAlarmList() {
    let mapByStation = HomepageModule.mapByStation;
    let from = {
      station: mapByStation.stationId,
      clzt: 0,
      page: 1,
      size: 200,
      // code: this.zz,
    };
    (this as any).$services
      .queryIntegrageAlarmList({ data: from, method: "get" })
      .then((result: any) => {
        this.changeHald("全部");
        this.loading = false;
        let data = result.data || {};
        let records = data.records || [];
        // console.log('records:',records);
        if (records && records.length) {
          let xtImgObj = {
            "01": "iconxiaofang",
            "02": "iconanfang",
            "03": "iconzaixianjiance",
            "04": "iconicon-wenshidu",
            xfxt: "iconxiaofang",
            afxt: "iconanfang",
            zxjc: "iconzaixianjiance",
            zsb: "iconzaixianjiance",
            hjjc: "iconicon-wenshidu",
            "05": "iconfloodLighting-o",
            zmxt: "iconfloodLighting-o",
            "06": "icongeipaishui",
            zdxs: "iconjiqiren",
            other: "iconqita",
          };
          // console.log('1111111111111this.mainLoadList:',this.mainLoadList);

          this.mainLoadList = this.sxx;
          // let sxx = [];
          this.sxx = records.map((v) => {
            let SBLX = v.SBLX || "";
            let xtValue = SBLX.slice(0, 2);
            let xtImg =
              xtImgObj[v.SID] || xtImgObj[xtValue] || xtImgObj["other"];
            let data = Object.assign({}, v, {
              imgsrc: xtImg,
              gjsj: v.GJSJ,
              ssbdz: v.BDZMC,
              gjnr: v.GJNR,
            });
            return data;
          });

          // console.log('2222222222222222222this.mainLoadList:',this.mainLoadList);
        }
      })
      .catch((err: object) => {
        this.loading = false;
        console.log(err);
      });
  }
  sxx = [];
  zz: any = "";
  changeHald(val) {
    this.zz = val;
    console.log(val);
    let sd = [];
    this.sxx.map((v)=>{
       if (val == "全部") {
      this.mainLoadList = this.sxx;
      console.log(this.mainLoadList.length);
      
      return
    
    }else if(v.GJDJ == val) {
        sd.push(v);
    }
    this.mainLoadList = sd;
    
    })

    // if (val == "全部") {
    //   this.mainLoadList = this.sxx;
    //   console.log(this.mainLoadList.length);
      
    //   return
    // } else {
    //   this.sxx.map((v) => {
    //     if (v.GJDJ == val) {
    //       sd.push(v);
    //     }
    //   });
    //   console.log(sd);
      
    //   this.mainLoadList = sd;
    // }
  }
  @Watch("zz")
  cdsf(val) {
    this.changeHald(val);
  }
  marqueeEnter(event) {
    event.target.stop();
  }
  marqueeLeave(event) {
    event.target.start();
  }
}
</script>

<style lang="scss" scoped>
.LockInformation {
  width: 100%;
  height: 100%;
  .more {
    // position: relative;
    width: 0.6rem;
    height: 0.25rem;
    margin-left: 92.5%;
    margin-top: -0.25rem;
    line-height: 0.25rem;
    text-align: center;
    // background: -moz-linear-gradient(top,rgb(20,161,237),rgb(21,95,249));
    // background: -webkit-gradient(linear,0%,0%,0%,100%,from(rgb(20,161,237)),to(rgb(21,95,249)));
    background-color: rgb(20, 110, 252, 0.7);
    cursor: pointer;
  }
  .title {
    height: 0.27rem;
    line-height: 0.27rem;
    font-size: 0.18rem;
    color: #fff;
    width: 100%;
    padding-left: 0.2rem;
  }
  &-con {
    width: 100%;
    height: calc(100% - 0.27rem);
    padding: 0.1rem 0rem 0.1rem 0.2rem;
    // background-color: gray;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    // background-color: cadetblue;
    &-title {
      width: 100%;
      height: 10%;
      display: flex;
      justify-content: space-around;
      text-align: center;
      .itemspecial {
        width: 10%;
      }
      .item {
        font-size: 0.18rem;
        // width: 25%;
      }
      > :nth-child(1) {
        width: 0.35rem;
      }
      > :nth-child(2) {
        width: 25%;
      }
      > :nth-child(3) {
        width: 25%;
      }
      > :nth-child(4) {
        width: 45%;
      }
    }
    /* 滚屏 */
    .marquee_box {
      display: block;
      position: relative;
      width: 100%;
      flex: 1;
      // height: 100%;
      overflow: hidden;
      // background-color: hotpink;
    }
    .marquee_list {
      width: 100%;
      display: block;
      cursor: pointer;
      .lione {
        // background-color: gray;
      }
      .litwo {
        // background-color: hotpink;
      }
      .tubiao {
        width: 0.3rem;
        height: 0.3rem;
        // background-color: cadetblue;
        .iconImage {
          width: 0.25rem;
          height: 0.25rem;
          display: inline-block;
          margin: 0 0.1rem;
          box-sizing: border-box;
        }
      }
    }
    .marquee_list li {
      height: 0.3rem;
      line-height: 0.3rem;
      font-size: 0.16rem;
      width: 100%;
      display: flex;
      justify-content: space-around;
      // background-color: red;
    }
    .marquee_list li span {
      // padding: 0 0.02rem;
      text-align: left;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 1rem;
      // background-color: palegreen;
    }
    .marquee_list li > :nth-child(2) {
      width: 1.7rem;
      // background-color: chartreuse;
    }
    .marquee_list li > :nth-child(3) {
      width: 1.5rem;
      // background-color: pink;
    }
    .marquee_list li > :nth-child(4) {
      width: calc(100% - 4rem);
      // background-color:gray;
    }
  }
}
</style>
<style>
.el-radio__inner {
  border: 1px solid #fff;
}
.el-radio__input.is-checked + .el-radio__label {
  color: #3bedff;
}
.el-radio__input.is-checked .el-radio__inner {
  border-color: #26e6fa;
  background: #26f0fa;
}
</style>

